<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Task Recorder</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:400,500,600&display=swap">
  <style>
    .task-desc.single-line {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      max-width: 100%;
    }
  </style>
</head>
<body>
  <h2>Task Recorder</h2>
  <form id="taskForm">
    <input type="text" id="title" placeholder="Title" required>
    <textarea id="description" placeholder="Description"></textarea>
    <input type="text" id="createdAt" placeholder="Created At (YYYY-MM-DD HH:mm, optional)">
    <button type="submit">Add Task</button>
  </form>
  <div style="position:absolute;top:18px;right:18px;z-index:2;">
    <button id="viewAllBtn" title="View All Tasks" style="background:none;border:none;padding:0;cursor:pointer;outline:none;">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="4" rx="1"/><rect x="3" y="10" width="18" height="4" rx="1"/><rect x="3" y="16" width="18" height="4" rx="1"/></svg>
    </button>
  </div>
  <ul id="taskList"></ul>
  <script src="popup.js"></script>
</body>
</html> 